<!doctype html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<html class="no-js">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="index">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="/assets/css/amazeui.css"/>
    <link rel="stylesheet" href="/assets/css/admin.css">
    <script src="/assets/js/jquery.min.js"></script>
    <script src="/assets/js/app.js"></script>
    <style type="text/css">
        .waaibiankuang {
            position: absolute;
            top: 0%;
            left: 0%;
            display: none;
            background: rgba(0, 0, 0, 0.3);
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: 9999
        }

        .neibiankuang {
            position: absolute;
            left: 35%;
            border-radius: 8px;
            width: 30%;
            background-color: #fff;
        }

        #editUserInfo:hover {
            cursor: pointer;
        }

        .edit_name {
            width: 80px;
            float: left;
            display: inline-block;
            margin-bottom: .5rem;
            margin-left: 18px;
            line-height: 38px;
        }

        .edit_input {
            float: left;
            display: block;
            width: 60%;
            padding: .375rem .75rem;
            font-size: 1rem;
            line-height: 1.5;
            color: #495057;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ced4da;
            border-radius: .25rem;
            transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        }

        .edit_btn {
            cursor: pointer;
            -webkit-appearance: button;
            display: inline-block;
            font-weight: 400;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            float: right;
            user-select: none;
            border: 1px solid transparent;
            padding: .375rem .75rem;
            font-size: 1rem;
            margin-right: 20px;
            line-height: 1.5;
            border-radius: .25rem;
            transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        }

        .edit_btn_close {
            margin-right: 20px;

        }

        .edit_btn_commit {
            color: #fff;
            background-color: #007bff;
            border-color: #007bff;
        }
    </style>
</head>
<body>
<div th:insert="~{common :: #header}"></div>
<div class="am-cf admin-main">
    <div th:insert="~{common ::#sidebar}"></div>
    <div class=" admin-content">
        <div class="daohang">
            <ul>
                <li>
                    <button type="button" class="am-btn am-btn-default am-radius am-btn-xs"/>
                    首页
                </li>
            </ul>
        </div>

        <div class="admin-biaogelist">
            <div class="listbiaoti am-cf">
                <ul class="am-icon-users"> 商品管理</ul>
                <dl class="am-icon-home" style="float: right;">当前位置： 首页 > <a href="#">商品管理</a></dl>
                <!--这里打开的是新页面-->
                <dl>
                    <button id="addFood" type="button" class="am-btn am-btn-danger am-round am-btn-xs am-icon-plus">
                        手动添加商品
                    </button>
                </dl>
            </div>
            <form class="am-form am-g" >
                <table width="100%" class="am-table am-table-bordered am-table-radius am-table-striped">
                    <thead>
                    <tr class="am-success">

                        <th class="table-author am-hide-sm-only">id</th>
                        <th class="table-author am-hide-sm-only">食材名称</th>
                        <th class="table-author am-hide-sm-only">库存量</th>
                        <th class="table-author am-hide-sm-only">原价</th>
                        <th class="table-author am-hide-sm-only">现价</th>

                        <th class="table-author am-hide-sm-only">是否热门</th>

                        <th class="table-author am-hide-sm-only">有效期</th>
                        <th class="table-author am-hide-sm-only">交易方式</th>

                        <th class="table-author am-hide-sm-only">区域</th>

                        <th class="table-date am-hide-sm-only">创建时间</th>
                        <th class="table-date am-hide-sm-only">更新时间</th>
                        <th width="130px" class="table-set">操作</th>
                    </tr>
                    </thead>
                    <tbody id="userInfo">
                    <tr th:each="food:${pageInfo.list}">

                        <td class="am-hide-sm-only" th:text="${food.id}"></td>
                        <td class="am-hide-sm-only" th:text="${food.foodName}"></td>
                        <td class="am-hide-sm-only" th:text="${food.quantity}"></td>
                        <td class="am-hide-sm-only" th:text="${food.oldPrice}"></td>
                        <td class="am-hide-sm-only" th:text="${food.nowPrice}"></td>

                        <td class="am-hide-sm-only" th:if="${food.isHot == 1}">热门交易</td>
                        <td class="am-hide-sm-only" th:if="${food.isHot == 2}">非热门交易</td>
                        <td class="am-hide-sm-only" th:text="${food.guarantee}"></td>
                        <td class="am-hide-sm-only" th:text="${food.foodCondition}"></td>


                        <td class="am-hide-sm-only" th:text="${food.place}"></td>



                        <td class="am-hide-sm-only" th:text="${#dates.format(food.createTime,'yyyy-MM-dd HH:mm')}"></td>
                        <td class="am-hide-sm-only" th:text="${#dates.format(food.updateTime,'yyyy-MM-dd HH:mm')}"></td>
                        <td>
                            <div class="am-btn-toolbar">
                                <div class="am-btn-group am-btn-group-xs">
                                    <div class="am-btn am-btn-default am-btn-xs am-text-success am-round">
                                        <span id="nouse" class="am-icon-search" title="没有用，就是为了好看加上的"></span>
                                    </div>
                                    <input type="hidden" id="foodId" th:value="${food.id}">
                                    <input type="hidden" id="foodName" th:value="${food.foodName}"/>
                                    <input type="hidden" id="quantity" th:value="${food.quantity}"/>
                                    <input type="hidden" id="oldPrice" th:value="${food.oldPrice}"/>
                                    <input type="hidden" id="nowPrice" th:value="${food.nowPrice}"/>
                                    <input type="hidden" id="categoryId" th:value="${food.categoryId}"/>
                                    <input type="hidden" id="detail" th:value="${food.detail}"/>
                                    <input type="hidden" id="weight" th:value="${food.weight}"/>
                                    <input type="hidden" id="foodLong" th:value="${food.foodLong}"/>
                                    <input type="hidden" id="height" th:value="${food.hight}"/>
                                    <input type="hidden" id="hot" th:value="${food.isHot}"/>
                                    <input type="hidden" id="width" th:value="${food.width}"/>
                                    <input type="hidden" id="foodStatus" th:value="${food.foodStatus}"/>
                                    <input type="hidden" id="foodImgUrl" th:value="${food.imgUrl}"/>
                                    <input type="hidden" id="introduce" th:value="${food.introduce}"/>
                                    <input type="hidden" id="guarantee" th:value="${food.guarantee}"/>
                                    <input type="hidden" id="manufacture" th:value="${food.manufacture}"/>
                                    <input type="hidden" id="foodCondition" th:value="${food.foodCondition}"/>
                                    <input type="hidden" id="place" th:value="${food.place}"/>

                                    <div id="editInformation"
                                         class="am-btn am-btn-default am-btn-xs am-text-secondary am-round"
                                         title="修改信息">
                                        <span id="editor" class="am-icon-pencil-square-o"></span>
                                    </div>
                                    <div id="deleteInformation"
                                         class="am-btn am-btn-default am-btn-xs am-text-danger am-round" title="删除信息">
                                        <span id="delete" class="am-icon-trash-o"></span>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>

                <ul class="am-pagination am-fr">
                    <li><a href="">«</a></li>
                    <li><a href=""></a></li>
                    <li><a href="">»</a></li>
                </ul>
                <div class="am-btn-group am-btn-group-xs"></div>
                <hr/>
                <p>注：.....</p>
            </form>

            <div class="foods">
                <dl>
                    <a href="" title="返回头部" class="am-icon-btn am-icon-arrow-up"></a>
                </dl>
            </div>
        </div>
    </div>
</div>


<!--添加食材信息-->
<div>
    <div id="editUserInfo" class="bg-model waaibiankuang">

        <form id="foodForm">
            <div class='content neibiankuang' style="width: 650px;">
                <div style=" display: flex;align-items: flex-start;justify-content: space-between;padding: 1rem;border-bottom: 1px solid #e9ecef;border-top-left-radius: .3rem;border-top-right-radius: .3rem;">
                    <h4 style="margin-bottom: 0; line-height: 1.5;font-size: 1.5rem;" id="gridSystemModalLabel1">添加商品信息</h4>
                </div>
                <input type="hidden" name="id" id="editFoodId">
                <div style="margin: 10px;height: 42px; width: 290px;float: left;">
                    <label class="edit_name">商品名称：</label>
                    <input type="text" style="font-size: 14px;width: 170px;  height: 40px;"
                           class="edit_input" placeholder="例如：魔兽世界(国服)点券"
                           id="editFoodName" name="foodName">
                </div>


                <div style="margin: 10px;height: 42px; width: 290px;float: left;">
                    <label class="edit_name">所属类别：</label>
                    <select id="editCategory" style="height: 40px;font-size: 14px;  border-radius: 3px;  width: 170px;"
                            name="categoryId">
                        <option th:each="category:${categories}" th:text="${category.title}"
                                th:value="${category.id}"></option>
                    </select>
                </div>

                <div style="margin: 10px;height: 42px; width: 290px;float: left;">
                    <label class="edit_name">商品图片：</label>
                    <input type="hidden" name="imgUrl" id="imgUrl">
                    <input type="file" style="font-size: 14px;width: 170px;  height: 40px;"
                           class="edit_input" id="editImage" name="imgUrl">
                </div>


                <div style="margin: 10px;height: 42px; width: 290px;float: left;">
                    <label class="edit_name">库存量：</label>
                    <input type="text" style="font-size: 14px;width: 170px;  height: 40px;"
                           class="edit_input" placeholder="例如：100"
                           id="editFoodQuantity" name="quantity">
                </div>

                <div style="margin: 10px;height: 42px; width: 290px;float: left;">
                    <label class="edit_name">原价：</label>
                    <input type="text" style="font-size: 14px;width: 170px;  height: 40px;"
                           class="edit_input" placeholder="例如：50.00"
                           id="editOldPrice" name="oldPrice">
                </div>

                <div style="margin: 10px;height: 42px; width: 290px;float: left;">
                    <label class="edit_name">现价：</label>
                    <input type="text" style="font-size: 14px;width: 170px;  height: 40px;"
                           class="edit_input" placeholder="例如：25.00"
                           id="editNowPrice" name="nowPrice">
                </div>

                <!--<div style="margin: 10px;height: 42px; width: 290px;float: left;">-->
                    <!--<label class="edit_name">长：</label>-->
                    <!--<input type="text" style="font-size: 14px;width: 170px;  height: 40px;"-->
                           <!--class="edit_input" placeholder="例如：18"-->
                           <!--id="editFoodLong" name="foodLong">-->
                <!--</div>-->
                <!--<div style="margin: 10px;height: 42px; width: 290px;float: left;">-->
                    <!--<label class="edit_name">宽：</label>-->
                    <!--<input type="text" style="font-size: 14px;width: 170px;  height: 40px;"-->
                           <!--class="edit_input" placeholder="例如：3"-->
                           <!--id="editFoodWidth" name="width">-->
                <!--</div>-->
                <!--<div style="margin: 10px;height: 42px; width: 290px;float: left;">-->
                    <!--<label class="edit_name">高：</label>-->
                    <!--<input type="text" style="font-size: 14px;width: 170px;  height: 40px;"-->
                           <!--class="edit_input" placeholder="例如：8"-->
                           <!--id="editFoodHeight" name="hight">-->
                <!--</div>-->

                <!--<div style="margin: 10px;height: 42px; width: 290px;float: left;">-->
                    <!--<label class="edit_name">重量：</label>-->
                    <!--<input type="text" style="font-size: 14px;width: 170px;  height: 40px;"-->
                           <!--class="edit_input" placeholder="例如：88"-->
                           <!--id="editFoodWeight" name="weight">-->
                <!--</div>-->

                <div style="margin: 10px;height: 42px; width: 290px;float: left;">
                    <label class="edit_name">有效期期：</label>
                    <input type="text" style="font-size: 14px;width: 170px;  height: 40px;"
                           class="edit_input" placeholder="例如：2个月"
                           id="editFoodGuarantee" name="guarantee">
                </div>

                <div style="margin: 10px;height: 42px; width: 290px;float: left;">
                    <label class="edit_name">交易方式：</label>
                    <input type="text" style="font-size: 14px;width: 170px;  height: 40px;"
                           class="edit_input" placeholder="例如：支持支付宝，微信，平台"
                           id="editFoodCondition" name="foodCondition">
                </div>
                <div style="margin: 10px;height: 42px; width: 290px;float: left;">
                    <label class="edit_name">简介：</label>
                    <input type="text" style="font-size: 14px;width: 170px;  height: 40px;"
                           class="edit_input" placeholder="例如：这里填写的是简介信息"
                           id="editFoodIntroduce" name="introduce">
                </div>


                <div style="margin: 10px;height: 42px; width: 290px;float: left;">
                    <label class="edit_name">区服：</label>
                    <input type="text" style="font-size: 14px;width: 170px;  height: 40px;"
                           class="edit_input" placeholder="例如：北京一区"
                           id="editFoodPlace" name="place">
                </div>
                <!--<div style="margin: 10px;height: 42px; width: 290px;float: left;">-->
                    <!--<label class="edit_name">创建日期：</label>-->
                    <!--<input type="text" style="font-size: 14px;width: 170px;  height: 40px;"-->
                           <!--class="edit_input" placeholder="例如：2018年8月8日"-->
                           <!--id="editFoodManufacture" name="manufacture">-->
                <!--</div>-->


                <div style="margin: 10px;height: 42px; width: 290px;float: left;">
                    <label class="edit_name">交易状态状态：</label>
                    <select name="foodStatus" style="height: 40px;font-size: 14px;  border-radius: 3px; width: 170px;"
                            id="editFoodStatus">
                        <option value="1">可交易</option>
                        <option value="2">不可交易</option>
                    </select>
                </div>

                <div style="margin: 10px;height: 42px; width: 290px;float: left;">
                    <label class="edit_name">是否热门：</label>
                    <select name="isHot" style="height: 40px;font-size: 14px;  border-radius: 3px; width: 170px;"
                            id="editFoodHot">
                        <option value="1">热门交易</option>
                        <option value="2">非热门交易</option>
                    </select>
                </div>


                <div style="margin: 10px;float: left;">
                    <label class="edit_name">详细介绍：</label>
                    <textarea type="text" style="font-size: 14px;width: 480px;  height: 60px;"
                           class="edit_input" placeholder="例如：这里填写的是详细介绍"
                              id="editFoodDetail" name="detail"></textarea>
                </div>
                <div style="height: 20px; justify-content: space-between;padding: 1rem;border-top: 1px solid #e9ecef;border-top-left-radius: .3rem;border-top-right-radius: .3rem;">
                    <button type="button" id="editUserInfoSubmit" class="edit_btn edit_btn_commit" data-dismiss="modal">
                        修改
                    </button>
                    <button type="button" class="edit_btn edit_btn_close" id="editUserInfoClose">关闭</button>
                </div>
                　　
            </div>
        </form>
    </div>
</div>


<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="/assets/js/polyfill/rem.min.js"></script>
<script src="/assets/js/polyfill/respond.min.js"></script>
<script src="/assets/js/amazeui.legacy.js"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="/assets/js/amazeui.js"></script>
<!--<![endif]-->


<script type="application/javascript">

    $(document).ready(function () {
        // 获取到事件
        $("#userInfo").on('click', 'span[id^="nouse"]', function () {
            alert("点下其他的试试^_^");
        });
        // 获取到修改事件
        $("#userInfo").on('click', '#editInformation', function () {
            $("#editUserInfo").fadeTo(300, 1);
            //隐藏窗体的滚动条
            $("body").css({"overflow": "hidden"});
            var foodId = $(this).prevAll("#foodId").val();
            var foodName = $(this).prevAll("#foodName").val();
            var quantity = $(this).prevAll("#quantity").val();
            var oldPrice = $(this).prevAll("#oldPrice").val();
            var nowPrice = $(this).prevAll("#nowPrice").val();
            var categoryId = $(this).prevAll("#categoryId").val();
            var detail = $(this).prevAll("#detail").val();
            var weight = $(this).prevAll("#weight").val();
            var foodLong = $(this).prevAll("#foodLong").val();
            var height = $(this).prevAll("#height").val();
            var width = $(this).prevAll("#width").val();
            var foodStatus = $(this).prevAll("#foodStatus").val();
            var foodImgUrl = $(this).prevAll("#foodImgUrl").val();
            var introduce = $(this).prevAll("#introduce").val();
            var guarantee = $(this).prevAll("#guarantee").val();
            var manufacture = $(this).prevAll("#manufacture").val();
            var foodCondition = $(this).prevAll("#foodCondition").val();
            var place = $(this).prevAll("#place").val();
            var hot = $(this).prevAll("#hot").val();

            $("#editFoodId").val(foodId);
            $("#editFoodName").val(foodName);
            $("#editCategory").val(categoryId);
            $("#imgUrl").val(foodImgUrl);
            $("#editFoodQuantity").val(quantity);
            $("#editOldPrice").val(oldPrice);
            $("#editNowPrice").val(nowPrice);
            $("#editFoodLong").val(foodLong);
            $("#editFoodWidth").val(width);
            $("#editFoodHeight").val(height);
            $("#editFoodWeight").val(weight);
            $("#editFoodGuarantee").val(guarantee);
            $("#editFoodCondition").val(foodCondition);
            $("#editFoodIntroduce").val(introduce);
            $("#editFoodManufacture").val(manufacture);
            $("#editFoodStatus").val(foodStatus);
            $("#editFoodDetail").val(detail);
            $("#editFoodPlace").val(place);
            $("#editFoodHot").val(hot);



        });
        // 修改事件关闭模态框
        $("#editUserInfoClose").click(function () {
            $("#editUserInfo").hide();
            //显示窗体的滚动条
            $("body").css({"overflow": "visible"});
        });
        // 提交修改信息
        $("#editUserInfoSubmit").click(function () {
            $.ajax({
                url: '/food/updateFood',
                dateType: 'JSON',
                type: 'POST',
                data: $("#foodForm").serialize(),
                success: function (result) {
                    console.log(result  )
                    if (result.code != 200) {
                        alert("更新失败！");
                        return false;
                    } else {
                        window.location.reload();
                    }
                }
            })
        });
        // 获取到删除事件
        $("#userInfo").on('click', '#deleteInformation', function () {
            if (!confirm("确定删除？")) {
                return false;
            }
            var foodId = $(this).prevAll("#foodId").val();
            alert(foodId)
            $.ajax({
                url: '/food/deleteById?foodId=' + foodId,
                success: function (result) {
                    if (result.code == 200) {
                        window.location.reload();
                    } else {
                        alert("删除失败！");
                        return;
                    }
                }
            })
        });

        // 添加食材
        $("#addFood").click(function () {
            $("#editFoodId").val("");
            $("#editFoodName").val("");
            $("#editCategory").val("");
            $("#imgUrl").val("");
            $("#editFoodQuantity").val("");
            $("#editOldPrice").val("");
            $("#editNowPrice").val("");
            $("#editFoodLong").val("");
            $("#editFoodWidth").val("");
            $("#editFoodHeight").val("");
            $("#editFoodWeight").val("");
            $("#editFoodGuarantee").val("");
            $("#editFoodCondition").val("");
            $("#editFoodIntroduce").val("");
            $("#editFoodManufacture").val("");
            $("#editFoodStatus").val("");
            $("#editFoodDetail").val("");
            $("#editFoodPlace").val("");
            $("#editUserInfo").fadeTo(300, 1);
            //隐藏窗体的滚动条
            $("body").css({"overflow": "hidden"});
        })

        $("#editImage").change(function () {
            var editImage = $("#editImage").get(0).files[0];
            console.log(editImage);
            var formDate = new FormData();
            formDate.append("editImage", editImage);
            $.ajax({
                url: '/file/upload',
                type: 'POST',
                processData: false,
                contentType: false,
                async: false,
                data: formDate,
                success: function (result) {
                    if (result.code == 200) {
                        $("#imgUrl").val("");
                        $("#imgUrl").val(result.data);
                    } else {
                        alert("上传失败");
                    }
                }

            })
        })

    });


</script>


</body>
</html>